<template>
  <view class="discover-page">
    <!-- 搜索栏 -->
    <view class="search-header">
      <view class="search-box">
        <at-icon value="search" size="16" color="#999"></at-icon>
        <input 
          v-model="searchKeyword" 
          type="text" 
          placeholder="发现精彩内容" 
          class="search-input"
          @confirm="onSearch"
        />
      </view>
    </view>

    <!-- 轮播图 -->
    <swiper class="banner-swiper" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(banner, index) in banners" :key="index">
        <image :src="banner.image" class="banner-image" mode="aspectFill" @click="onBannerClick(banner)"></image>
      </swiper-item>
    </swiper>

    <!-- 快捷入口 -->
    <view class="quick-entry">
      <view class="entry-title">快速发现</view>
      <view class="entry-grid">
        <view 
          v-for="entry in quickEntries" 
          :key="entry.id"
          class="entry-item"
          @click="onEntryClick(entry)"
        >
          <view class="entry-icon" :style="{ backgroundColor: entry.color }">
            <at-icon :value="entry.icon" size="24" color="#fff"></at-icon>
          </view>
          <text class="entry-text">{{ entry.name }}</text>
        </view>
      </view>
    </view>

    <!-- 推荐内容 -->
    <view class="recommend-section">
      <view class="section-header">
        <text class="section-title">为你推荐</text>
        <text class="more-btn" @click="viewMore">更多</text>
      </view>
      <view class="recommend-list">
        <view 
          v-for="item in recommendList" 
          :key="item.id"
          class="recommend-item"
          @click="onItemClick(item)"
        >
          <image :src="item.image" class="item-image" mode="aspectFill"></image>
          <view class="item-info">
            <text class="item-title">{{ item.title }}</text>
            <text class="item-desc">{{ item.description }}</text>
            <view class="item-meta">
              <text class="item-price">¥{{ item.price }}</text>
              <text class="item-views">{{ item.views }}人浏览</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 热门话题 -->
    <view class="topic-section">
      <view class="section-header">
        <text class="section-title">热门话题</text>
      </view>
      <view class="topic-list">
        <view 
          v-for="topic in topicList" 
          :key="topic.id"
          class="topic-item"
          @click="onTopicClick(topic)"
        >
          <text class="topic-tag">#{{ topic.name }}#</text>
          <text class="topic-count">{{ topic.count }}人参与</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'

export default {
  name: 'DiscoverPage',
  setup() {
    const searchKeyword = ref('')
    const banners = ref([
      {
        id: 1,
        image: 'https://via.placeholder.com/375x150/3478F6/ffffff?text=发现精彩',
        title: '发现精彩课程',
        url: '/pages/course/list'
      },
      {
        id: 2,
        image: 'https://via.placeholder.com/375x150/F5A623/ffffff?text=优质教育',
        title: '优质教育资源',
        url: '/pages/course/list'
      }
    ])

    const quickEntries = ref([
      {
        id: 1,
        name: '热门课程',
        icon: 'fire',
        color: '#FF6B6B',
        url: '/pages/course/list?type=hot'
      },
      {
        id: 2,
        name: '新课上线',
        icon: 'star-2',
        color: '#4ECDC4',
        url: '/pages/course/list?type=new'
      },
      {
        id: 3,
        name: '免费体验',
        icon: 'gift',
        color: '#45B7D1',
        url: '/pages/course/list?type=free'
      },
      {
        id: 4,
        name: '名师课堂',
        icon: 'user',
        color: '#96CEB4',
        url: '/pages/course/list?type=master'
      }
    ])

    const recommendList = ref([
      {
        id: 1,
        title: '钢琴入门基础课程',
        description: '从零开始学钢琴，专业老师一对一指导',
        image: 'https://via.placeholder.com/120x80/3478F6/ffffff?text=钢琴',
        price: 199,
        views: 1234
      },
      {
        id: 2,
        title: '少儿美术创意课',
        description: '培养孩子的艺术天赋和创造力',
        image: 'https://via.placeholder.com/120x80/F5A623/ffffff?text=美术',
        price: 158,
        views: 856
      },
      {
        id: 3,
        title: '英语口语提升班',
        description: '外教一对一，快速提升口语水平',
        image: 'https://via.placeholder.com/120x80/4ECDC4/ffffff?text=英语',
        price: 299,
        views: 2341
      }
    ])

    const topicList = ref([
      {
        id: 1,
        name: '亲子教育',
        count: 1234
      },
      {
        id: 2,
        name: '技能提升',
        count: 856
      },
      {
        id: 3,
        name: '兴趣培养',
        count: 2341
      },
      {
        id: 4,
        name: '职业发展',
        count: 567
      }
    ])

    const onSearch = () => {
      if (searchKeyword.value.trim()) {
        Taro.navigateTo({
          url: `/pages/search/index?keyword=${encodeURIComponent(searchKeyword.value)}`
        })
      }
    }

    const onBannerClick = (banner) => {
      if (banner.url) {
        Taro.navigateTo({
          url: banner.url
        })
      }
    }

    const onEntryClick = (entry) => {
      if (entry.url) {
        Taro.navigateTo({
          url: entry.url
        })
      }
    }

    const onItemClick = (item) => {
      Taro.navigateTo({
        url: `/pages/course/detail?id=${item.id}`
      })
    }

    const onTopicClick = (topic) => {
      Taro.navigateTo({
        url: `/pages/search/index?topic=${encodeURIComponent(topic.name)}`
      })
    }

    const viewMore = () => {
      Taro.navigateTo({
        url: '/pages/course/list'
      })
    }

    onMounted(() => {
      // 页面加载时的初始化逻辑
    })

    return {
      searchKeyword,
      banners,
      quickEntries,
      recommendList,
      topicList,
      onSearch,
      onBannerClick,
      onEntryClick,
      onItemClick,
      onTopicClick,
      viewMore
    }
  }
}
</script>

<style lang="less">
.discover-page {
  background-color: #f5f5f5;
  min-height: 100vh;

  .search-header {
    background-color: #fff;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

    .search-box {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #f8f8f8;
      border-radius: 50rpx;
      padding: 20rpx 30rpx;

      .search-input {
        flex: 1;
        margin-left: 20rpx;
        font-size: 28rpx;
        color: #333;

        &::placeholder {
          color: #999;
        }
      }
    }
  }

  .banner-swiper {
    height: 300rpx;
    margin: 20rpx;
    border-radius: 20rpx;
    overflow: hidden;

    .banner-image {
      width: 100%;
      height: 100%;
    }
  }

  .quick-entry {
    background-color: #fff;
    margin: 20rpx;
    border-radius: 20rpx;
    padding: 30rpx;

    .entry-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
    }

    .entry-grid {
      display: flex;
      justify-content: space-between;

      .entry-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;

        .entry-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20rpx;
        }

        .entry-text {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }

  .recommend-section, .topic-section {
    background-color: #fff;
    margin: 20rpx;
    border-radius: 20rpx;
    padding: 30rpx;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .more-btn {
        font-size: 26rpx;
        color: #3478F6;
      }
    }

    .recommend-list {
      .recommend-item {
        display: flex;
        margin-bottom: 30rpx;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #f0f0f0;

        &:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
          border-bottom: none;
        }

        .item-image {
          width: 120rpx;
          height: 80rpx;
          border-radius: 10rpx;
          margin-right: 20rpx;
        }

        .item-info {
          flex: 1;

          .item-title {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
            display: block;
          }

          .item-desc {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 15rpx;
            display: block;
          }

          .item-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .item-price {
              font-size: 28rpx;
              color: #FF6B6B;
              font-weight: bold;
            }

            .item-views {
              font-size: 22rpx;
              color: #999;
            }
          }
        }
      }
    }

    .topic-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      .topic-item {
        background-color: #f8f8f8;
        border-radius: 30rpx;
        padding: 15rpx 25rpx;
        display: flex;
        align-items: center;

        .topic-tag {
          font-size: 26rpx;
          color: #3478F6;
          margin-right: 10rpx;
        }

        .topic-count {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }
}
</style>